<template>
    <div class="list" >
       <ul>
           <li class="item" 
                v-for="item of lesttr" 
                :key="item"
                :ref="item"
                @touchstart.prevent="handtouchstart"
                @touchmove="handletouchmove"
                @touchend="handletouchend"
                @click="handclick"
                >{{item}}</li>
       </ul>  
    </div>
</template>

<script>

export default {
    name:'cityalphabet',
    props:{
        aases:Object
    },
    data(){
        return{
            touchstart:false  
        }
    },
    computed:{
        lesttr(){
            const lesttr=[]
            for(let i in this.aases){
                lesttr.push(i)
            }
            return lesttr
        }
    },
    methods:{
        handclick(e){
           this.$emit('change',e.target.innerText)
        },
        handtouchstart(e){
            this.touchstart=true
        },
        handletouchmove(e){
            if(this.touchstart){
                    const starty=this.$refs['A'][0].offsetTop //获取第一个数字的离父元素的高度
                    const touchy=e.touches[0].clientY-79  //获取中间的高度
                    const indexr =Math.floor((touchy-starty)/20)//每一个字母的高度
                    if(indexr>=0 && indexr <this.lesttr.length ){ 
                        this.$emit('change',this.lesttr[indexr]) //触发事件
                    }
            }
        },
        handletouchend(e){
            this.handletouchend=false
        }
    }
    
}
</script>


<style lang="stylus" scoped>
       @import '~styles/varibles.styl' 
      .list
        display flex
        flex-direction column
        justify-content center
        position absolute
        right 0
        top 1.6rem
        bottom 0
        width .4rem
        .item
            text-align center
            line-height .44rem
            color #000


                
       
       




</style>



